<template>
	<view class="bannerBox">
		<view class="swiperBox">
			<swiper class="swiper" :current="current" :autoplay="autoplay" circular :interval="2500" @change="change">
                <block v-if="aerialObj.path">
                    <swiper-item>
                    	<view class="swiper-item">
                    		<image class="swiperImg" :src="aerialImgURL" mode="aspectFill"></image>
                    		<view class="swiperMask flex" @click="toVR('aerial')">
                    			<view class="swiperIconBg hangpai">
                                    <image class="aerialIcon" src="https://image.srea.org.cn/xcx/icon/icon-detail-aerial-fff.png" mode="widthFix"></image>
                                </view>
                    		</view>
                    	</view>
                    </swiper-item>
                </block>

                <block v-if="vrObj.vr_url">
                    <swiper-item>
                        <view class="swiper-item" @click="toVR('vr')">
                            <image class="swiperImg" :src="vrImgURL"></image>
                            <view class="swiperMask flex">
                                <view class="swiperIconBg hangpai">
                                    <image class="aerialIcon" src="https://image.srea.org.cn/xcx/icon/icon-detail-vr-fff.png" mode="widthFix"></image>
                                </view>
                            </view>
                        </view>
                    </swiper-item>
                </block>

                <block v-if="videoObj.url">
                    <swiper-item>
                        <view class="swiper-item" @click="changeVideo">
                            <video class="myVideo" id="myVideo" :src="videoSrc" objectFit="cover" :title="product.title" :muted="mutedPlay" autoplay
                                @error="videoErrorCallback" :controls="false"></video>
                        </view>
                    </swiper-item>
                </block>
                
                <swiper-item v-if="carouselImages.length > 0">
                    <view class="swiper-item" @click="toHousesAlbum">
                        <image class="swiperImg" :src="carouselImages[0].url" mode="aspectFill"></image>
                    </view>
                </swiper-item>
			</swiper>

			<view class="dot-main flex">
                <view class="dotBox flex">
                    <block v-for="(item,index) in bannerNav" :key="index">
                    	<view :class="['dot-item flex font13',dotCurrent==index?'active':'']"  @click="btnNav(index)">
                    		{{item.title}}
                    	</view>
                    </block>
                </view>
			</view>
			
            <view class="viewNum col-fff flex">
                <u-icon name="eye" color="#ffffff" size="14"></u-icon>
                <text class="num">{{lookTotal}}</text>
            </view>
		</view>
	</view>
</template>

<script>
    import { mapState } from 'pinia';
    import { useIndexStore, useConfigStore } from '@/store/index';
    import { vidToUrl } from '@/common/common';
	export default {
		data() {
			return {
				current: 0,
                autoplay: true,
				dotCurrent: 0,
                playFlag: false,
                context: null,
                videoSrc: '',
                mutedPlay: true
			}
		},
		props:{
            kaiId: {
                type: [Number, String],
                default: ''
            },
			product: {
				type: Object,
				default: {}
			},
            carousels: {
                type: Array,
				default: function() { return []}
            },
            aerialObj: {
                type: Object,
                default: function() { return {}}
            },
			vrObj: {
				type: Object,
				default: function() { return {}}
			},
            bannerAd: {
                type: Array,
                default: () => ([])
            },
			videoObj: {
				type: Object,
				default: () => ({})
			},
            channelId: {
                type: String,
                default: ''
            }
		},
        computed:{
            ...mapState(useConfigStore, ['disclaimer']),
            ...mapState(useIndexStore, ['puid']),

            carouselImages: function() {
                if(this.carousels.length > 0) return this.carousels;

                if('image_list' in this.product === false) return [];

                if(this.product?.image_list?.length > 0) return this.product.image_list;

                return [];
            },

            bannerNav: function () {
                let navList = [{title: '图片', value: 'image'}];
                
                
                if(this.videoObj.url) {
                    navList.unshift({title: '视频', value: 'video'})
                }
                if(this.vrObj.vr_url) {
                    navList.unshift({title: 'VR', value: 'vr'})
                }
                if(this.aerialObj.path) {
                    navList.unshift({title: '航拍', value: 'aerial'})
                }
                if(this.bannerAd.length > 0 && this.bannerAd[0].image.length>0) {
                    navList.splice(1,0,{title: '广告', value: 'ad', lastType: navList[0].value})
                }
                return navList
            },

            aerialImgURL: function () {
                if(!('image' in this.aerialObj)) return '';

                if(this.aerialObj.image.length > 0) {
                    return this.aerialObj.image[0].url
                }
                if(this.carouselImages.length > 0) {
                    return this.carouselImages[0].url
                }
                return ''
            },

            vrImgURL: function() {
                if(!('vr_list' in this.vrObj)) return '';

                if(this.vrObj.vr_list.length > 0) {
                    return this.vrObj.vr_list[0].url
                }

                if(this.product.template_list.length > 0) {
                    return this.product.template_list[0].url
                }

                if(this.carouselImages.length > 0) {
                    return this.carouselImages[0].url
                }
                return ''
            },

            lookTotal: function() {
                let totalStr = String(this.product.view_num).length;
                if(totalStr >= 5){
                	return (this.product.view_num/10000).toFixed(1)+'w'
                }else{
                	return this.product.view_num
                }
            }
        },
       
        watch: {
            videoObj: {
                handler(newVal, oldVal) {
                    if(newVal.url) {
                        this.toVideoUrl()
                    }
                },
                deep: true,
                immediate: true
            }
        },
        
        created() {
            this.context = uni.createVideoContext("myVideo", this);
        },
        
        
		methods:{
            //点击轮播图数据埋点提交
            bannerClickStatist({path='', pid=''}) {
                
            },

            //解析视频播放
            toVideoUrl(){
                const that = this;
                vidToUrl(this.videoObj.url).then(url_ => {
                    this.$nextTick(function(){
                        that.videoSrc = url_;
                        that.playFlag = true;
                    })
                })
            },

            //点击广告
            clickBanAD() {
                if(this.bannerAd[0].product_id) {
                    const url = `/pages/house/sign-up/sign-up-ad?productId=${this.bannerAd[0].product_id}`

                    this.bannerClickStatist({path: url, pid: this.bannerAd[0].product_id});

                    uni.navigateTo({
                        url
                    })
                }
            },

            //点击视频跳转
            changeVideo(){
                const url = `/pages/product/video/list/index?productId=${this.product.id}&kaiId=${this.videoObj.pan_id?this.videoObj.pan_id:this.kaiId}&title=${this.product.title}&puid=${this.puid}&prepage=楼盘视频列表页-${this.product.id}-${this.product.title}`;

                // this.bannerClickStatist({path: url});

                uni.navigateTo({
                    url
                })
            },
            
			//楼盘相册
			toHousesAlbum(){
                const url = `/pages/product/album/index?productId=${this.product.id}&puid=${this.puid}&title=${this.product.title}&prepage=楼盘详情页-${this.product.id}-${this.product.title}`;

                // this.bannerClickStatist({path: url});

                uni.navigateTo({
                	url
                })
			},

            //跳转航拍或vr
			toVR(type){
                if(type === 'aerial') {
                    let url = encodeURIComponent(this.aerialObj.path);
                    let image = encodeURIComponent(this.aerialObj.image[0].url);

                    // this.bannerClickStatist({path: '/pages/product/article/detail/index'});

                    uni.navigateTo({
                    	url: `/pages/product/article/detail/index?url=${url}&productId=${this.product.id}&puid=${this.puid}&title=${this.product.title}(航拍)&image=${image}&prepage=楼盘详情页-${this.product.id}-${this.product.title}`
                    })
                }else {
                    // this.bannerClickStatist({path: '/pages/house/vr-list'});

                    uni.navigateTo({
                        url: `/pages/product/vr/list/index?productId=${this.product.id}&kaiId=${this.kaiId}&title=${this.product.title}&puid=${this.puid}&prepage=楼盘详情页-${this.product.id}-${this.product.title}`
                    })
                }
			},
			
			//切换swiper
			change(e) {
                const index = e.detail.current;
				if(index >= this.bannerNav.length-1){
					this.dotCurrent = this.bannerNav.length-1;
				}else{
					this.dotCurrent = index;
				}

                //如果是当前视频就播放，不是就暂停  
                if(this.bannerNav[index].value === 'video' && this.videoObj.url) {
                    this.playFlag = true;
                    this.context.play();
                }else{
                    this.playFlag = false;
                    this.context.pause();
                }

                // //出发广告曝光量埋点
                // if(this.bannerNav[index].value === 'ad') {
                //     this.$emit('changeAd', {
                //         id: this.bannerAd[0].id,
                //         product_id: this.bannerAd[0].product_id || '',
                //         product_name: this.bannerAd[0].product_name || ''
                //     })
                // }
			},
            
			//点击swiper nav
			btnNav(index) {
                this.autoplay = false;
                this.current = index;
				this.dotCurrent = index;
			},

            //切换到最后一个nav
            changeLastNav() {
                const lastIndex = this.bannerNav.length - 1;
                this.autoplay = false;
                this.current = lastIndex;
				this.dotCurrent = lastIndex;
            },

            videoErrorCallback(e){
                uni.showModal({
                	content: e.target.errMsg,
                	showCancel: false
                })
            }
		}
	}
</script>

<style scoped lang="scss">
	.bannerBox{
        line-height: 1;
		.swiperBox{
            height: 422rpx;
			position: relative;
		}
		.swiper{
			height: 422rpx;
			.swiper-item{
				height: 100%;
				position: relative;
                .myVideo{
                    width: 100%;
                    height: 422rpx;
                }
				.swiperImg{
					height: 100%;
					width: 100%;
				}
				.swiperMask{
					position: absolute;
					top: 0;
					left: 0;
					width: 100%;
					height: 100%;
					background-color: rgba(0,0,0,0.06);
                    .swiperIconBg{
                        width: 120rpx;
                        height: 120rpx;
                        text-align: center;
                        border-radius: 50%;
                        background-color: rgba(0,0,0,.5);
                    }
                    .hangpai{
                        .aerialIcon,.videoIcon{
                            margin-top: 45rpx;
                            width: 60rpx;
                            /*#ifdef MP-BAIDU || MP-TOUTIAO*/
                            height: 75rpx;
                            /*#endif*/
                        }
                    }
				}
			}
		}
		.dot-main {
            width: 50%;
			height: 40rpx;
			position: absolute;
			left: 25%;
			bottom: 30rpx;
            .dotBox{
                background-color: rgba(255,255,255,.5);
                border-radius: 20rpx;
                overflow: hidden;
                .dot-item {
                	width: 86rpx;
                	height: 50rpx;
                	background: none;
                	overflow: hidden;
                }
                .active {
                	background-color: $theme-color;
                	color: #FFFFFF;
                    border-radius: 20rpx;
                }
            }
		}
        .viewNum{
            position: absolute;
            left: 30rpx;
            bottom: 30rpx;
            z-index: 1;
            font-size: 21rpx;
            padding: 5rpx 15rpx;
            border-radius: 20rpx;
            background-color: rgba(0,0,0,.5);
            .num{
                margin-left: 5rpx;
            }
        }
	}
</style>